<template>
  <div class='container'>
    <el-dialog @close="closeDialog" title="预览文章" :visible="visiblePreview">
      <div class="title">
          <h2>{{articleDetail.title}}</h2>
          <div>
            <span>{{articleDetail.createTime|parseTimeByString}}</span>
            <span>{{articleDetail.username}}</span>
            <span class="el-icon-view"></span>
            <span>{{articleDetail.visits}}</span>
          </div>
        </div>
        <div class="content" v-html="articleDetail.articleBody"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    articleDetail: {
      type: Object,
      required: true
    },
    visiblePreview: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    closeDialog () {
      this.$emit('update:visiblePreview', false)
    }
  }
}
</script>

<style scoped lang="scss">
.questions-preview{
  .el-col{
    padding: 10px 0;
  }
}
.video{
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
